{include file="public/header"/}
<style>
    .evan-form-item-container {
        border-bottom: 0.5px solid #eee
    }

    .evan-form-item-container__label {
        font-size: 14px;
        color: #666;
        line-height: 20px;
        padding: 12px 0;
        display: inline-block
    }

    .evan-form-item-container__label.showAsteriskRect::before {
        content: "";
        color: #f56c6c;
        width: 10px;
        display: inline-block
    }

    .evan-form-item-container__label.isRequired::before {
        content: "*"
    }

    .evan-form-item-container__main {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        min-height: 45px;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        overflow: hidden
    }

    .evan-form-item-container--left {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: start;
        -webkit-align-items: flex-start;
        align-items: flex-start
    }

    .evan-form-item-container--top .evan-form-item-container__label {
        padding-bottom: 5px
    }

    .container {
        width: 100%;
        height: 100vh !important;
        background: -webkit-gradient(linear, left top, right top, from(var(--color1)), to(var(--color2)));
        background: -webkit-linear-gradient(left, var(--color1), var(--color2));
        background: linear-gradient(90deg, var(--color1), var(--color2));
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }

    .container .header {
        height: 44px;
        background-color: #fff;
        color: #000;
        line-height: 44px;
        text-align: center;
        font-size: 16px
    }

    .container > .title {
        font-size: 24px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #fff;
        padding: 80px 32px 30px
    }

    .container .items {
        padding: 0 32px
    }

    .container .items .evan-form-item-container {
        border-bottom: 1px solid #eeeff2
    }

    .container .items .evan-form-item-container {
        border-bottom: 1px solid #eeeff2
    }

    .container .items .form-input-placeholder {
        color: #fff;
        opacity: .5
    }

    .container .items .evan-form-item-container__label {
        width: 90px;
        text-align: center
    }

    .container .items .item {
        height: 50px;
        line-height: 50px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: relative
    }

    .container .items .item .iconArrow {
        display: inline-block;
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 6px solid #333;
        position: absolute;
        top: 45%;
        right: 10px
    }

    .container .items .item .input-placeholder {
        color: #fff;
        opacity: .5
    }

    .container .items .item uni-input {
        width: 100%;
        height: 100%;
        color: #fff
    }

    .container .items .item .uni-input {
        width: 90px;
        text-align: center;
        opacity: .6;
        white-space: nowrap;
        overflow: hidden
    }

    .container .items .item .getCode {
        color: #000;
        font-size: 14px;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 9999;
        width: 40px;
        height: 90%;
        display: block;
        background: #ddd;
        text-align: center
    }

    .container .items .item .active {
        background: #56b3f8;
        color: #fff
    }

    .container .items .item uni-image {
        position: absolute;
        right: 0;
        z-index: 9999;
        width: 20px;
        height: 20px
    }

    .container .btn {
        height: 48px;
        line-height: 48px;
        text-align: center;
        background: #56b3f8;
        font-size: 16px;
        color: #fff;
        border-radius: 20px;
        border: 1px solid #56b3f8;
        margin: 30px 32px 0
    }

    .container .download {
        background: none;
        border: 1px solid #9981fd
    }

    .container1 {
        background: -webkit-gradient(linear, left top, left bottom, from(#0a3cff), to(#0bd3ff));
        background: -webkit-linear-gradient(top, #0a3cff, #0bd3ff);
        background: linear-gradient(180deg, #0a3cff, #0bd3ff)
    }

    .container1 .uni-input, .container1 .iconArrow {
        color: #fff !important;
        border-top-color: #fff !important
    }

    .getCode {
        padding: 0 13px;
        border-radius: 13px;
        background-color: #dad5d5;
        font-size: 19px;
        font-family: Rubik-Medium, Rubik;
        font-weight: 500;
        color: #fff;
        top: -26px;
        right: 0;
        position: absolute;
        z-index: 999999;
    }

    input::-webkit-input-placeholder {
        color: #87b5f3;
    }

    input::-ms-input-placeholder {
        color: #87b5f3;
    }
</style>


<body>
<uni-app class="uni-app--maxwidth">
    <uni-page data-page="pages/forget/index">
        <!---->
        <!---->
        <uni-page-wrapper>
            <uni-page-body>
                <div class="container container1">
                    <div class="title">忘记密码</div>
                    <div class="evan-form-container items">
                        <div class="item">
                            <div class="evan-form-item-container evan-form-item-container--left"
                                 style="border-width: 0.5px;">
                                <!---->
                                <div class="evan-form-item-container__main">
                                    <uni-picker>
                                        <div>
                                            <div class="uni-input">91</div>
                                            <uni-text class="iconArrow"><span></span></uni-text>
                                        </div>
                                        <!---->
                                        <!---->
                                    </uni-picker>
                                    <uni-input class="form-input">
                                        <div class="uni-input-wrapper">
                                            <input name="phone" maxlength="10" onchange="check_phone()" step="" enterkeyhint="done" autocomplete="off" type="" class="uni-input-input" placeholder="Phone number">
                                            <!---->
                                        </div>
                                    </uni-input>
                                    <uni-text id="Send" class="getCode"><span>发送</span></uni-text>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="evan-form-item-container evan-form-item-container--left"
                                 style="border-width: 0.5px;">
                                <!---->
                                <div class="evan-form-item-container__main">
                                    <uni-input class="form-input">
                                        <div class="uni-input-wrapper">
                                            <input name="code" maxlength="140" step="" enterkeyhint="done" autocomplete="off" type="" class="uni-input-input" placeholder="Verification code">
                                            <!---->
                                        </div>
                                    </uni-input>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="evan-form-item-container evan-form-item-container--left"
                                 style="border-width: 0.5px;">
                                <!---->
                                <div class="evan-form-item-container__main">
                                    <uni-input class="form-input">
                                        <div class="uni-input-wrapper">
                                            <input name="password" maxlength="140" step="" enterkeyhint="done" autocomplete="off" type="password" class="uni-input-input" placeholder="Enter new password">
                                            <!---->
                                        </div>
                                    </uni-input>
                                    <uni-image class="showPass">
                                        <div
                                                style="background-image: url(/static/index/img/show.b1bbb5f1.png&quot;); background-position: 0% 0%; background-size: 100% 100%; background-repeat: no-repeat;">
                                        </div>
                                        <img src="/static/index/img/show.b1bbb5f1.png" draggable="true">
                                        <!---->
                                    </uni-image>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="btn Confirm">确认</div>
                </div>
            </uni-page-body>
        </uni-page-wrapper>
    </uni-page>
</uni-app>
</body>
</html>

<script src="/static/jquery.cookie.js"></script>

<script>
    $(function () {
        if ($.cookie("captcha")) {
            var count = $.cookie("captcha");
            $('#Send').text("(" + count + ")S").attr('disabled', true);
            var resend = setInterval(function () {
                count--;
                if (count > 0) {
                    $('#Send').text("(" + count + ")S").attr('disabled', true);
                    $.cookie("captcha", count, {path: '/', expires: (1 / 86400) * count});
                } else {
                    clearInterval(resend);
                    $('#Send').text("Send").addClass("active");
                }
            }, 1000);
        }

        $(document).on("click", ".active", function () {
            var phone = $("input[ name='phone']").val();
            var type = 4;
            if (phone && type) {
                layer.load(2);
                $.ajax({
                    url: "{:Url('sms_code')}",
                    type: "post",
                    traditional: true,
                    data: {phone: phone,type:type},
                    success: function (e) {
                        layer.closeAll('loading');
                        if (e.code === 1) {
                            layer.msg(e.msg);
                            var btn = $(this);
                            var count = 60;
                            var resend = setInterval(function () {
                                count--;
                                if (count > 0) {
                                    $('#Send').text("(" + count + ")S").attr('disabled', true);
                                    $('#Send').removeClass("active");
                                    $.cookie("captcha", count, {path: '/', expires: (1 / 86400) * count});
                                } else {
                                    clearInterval(resend);
                                    $('#Send').text("Send").addClass("active");
                                }
                            }, 1000);
                            btn.attr('disabled', true).css('cursor', 'not-allowed');
                        } else {
                            layer.msg(e.msg, function () {
                                return false;
                            });
                        }
                    },
                });
            } else {
                layer.msg('Mobile phone number cannot be empty', function () {
                });
            }
        });
    });
</script>

<script>
    function check_phone() {
        var phone = $("input[ name='phone']").val();
        layer.load(2);
        $.ajax({
            url: "{:Url('check_phone')}",
            type: "post",
            traditional: true,
            data: {phone: phone},
            success: function (e) {
                layer.closeAll('loading');
                if (e.code === 1) {
                    layer.msg('The phone number is not registered', function () {
                        $("input[ name='phone']").val('');
                    });
                } else {
                    $("#Send").addClass("active");
                }
            },
        });
    }
</script>

<script>
    $(document).on("click", ".Confirm", function () {
        var phone = $("input[ name='phone']").val();
        var code = $("input[ name='code']").val();
        var password = $("input[ name='password']").val();
        layer.load(2);
        $.ajax({
            url: "{:Url('forget')}",
            type: "post",
            traditional: true,
            data: {phone: phone, code: code, password:password},
            success: function (e) {
                layer.closeAll('loading');
                if (e.code === 1) {
                    layer.msg(e.msg, {
                        time: 2000,
                        end: function () {
                            window.location.href = "{:Url('login/index')}";
                        }
                    });
                } else {
                    layer.msg(e.msg, function () {
                        return false;
                    });
                }
            },
        });
    });
</script>